<template>
	<div class="p-6 space-y-6">

		<el-form :inline="true" :model="filters" class="mb-4">
			<el-form-item label="发起人">
				<el-input v-model="filters.initiator" placeholder="请输入发起人" size="small" style="width: 200px" />
			</el-form-item>
			<el-form-item label="状态">
				<el-select v-model="filters.status" placeholder="请选择状态" size="small" style="width: 150px" clearable>
					<el-option label="待响应" value="待响应" />
					<el-option label="竞价中" value="竞价中" />
					<el-option label="已结束" value="已结束" />
				</el-select>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" size="small" @click="applyFilters">筛选</el-button>
				<el-button size="small" @click="resetFilters">重置</el-button>
			</el-form-item>
		</el-form>

		<el-table :data="filteredData" border>
			<el-table-column type="index" label="#" width="50" />
			<el-table-column prop="invitationNo" label="邀请编号" />
			<el-table-column prop="initiator" label="发起人" />
			<el-table-column prop="subject" label="竞价主题" />
			<el-table-column prop="status" label="状态" />
			<el-table-column prop="date" label="创建时间" />
		</el-table>
	</div>
</template>

<script setup>
import { ref, computed } from 'vue'

const initiators = ['张三', '李四', '王五', '赵六', '钱七']
const subjects = ['光刻胶采购', '设备维护外协', '辅料采购', '项目招标', '软件外包']
const statuses = ['待响应', '竞价中', '已结束']

const data = ref(Array.from({ length: 15 }).map(() => ({
	invitationNo: 'INV' + Math.floor(Math.random() * 100000),
	initiator: initiators[Math.floor(Math.random() * initiators.length)],
	subject: subjects[Math.floor(Math.random() * subjects.length)],
	status: statuses[Math.floor(Math.random() * statuses.length)],
	date: new Date(new Date().getTime() - Math.random() * 1000 * 60 * 60 * 24 * 30).toLocaleDateString()
})))

const filters = ref({ initiator: '', status: '' })

const filteredData = computed(() => {
	return data.value.filter(item => {
		const matchInitiator = filters.value.initiator ? item.initiator.includes(filters.value.initiator) : true
		const matchStatus = filters.value.status ? item.status === filters.value.status : true
		return matchInitiator && matchStatus
	})
})

const applyFilters = () => { }
const resetFilters = () => { filters.value = { initiator: '', status: '' } }
</script>

<style scoped>
.text-xl {
	font-size: 1.25rem;
}
</style>
  
